<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 轮播插件 -->
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
</head>

<body>
    <!-- header -->
    <header>
        <div>
            <span class="iconfont">&#xe60c;</span>
            <input type="text" placeholder="搜索商家">
        </div>
    </header>
    <!-- main -->
    <main id="main">
        <div class="main-content">
            <!-- 下拉刷新 -->
            <section class="rgf-xiala">
                下拉刷新
            </section>
            <!--上拉加载 -->
            <section class="rgf-shangla">
                上拉加载
            </section>
            <div class="swiper-container rgf-banner">
                <div class="swiper-wrapper">
                    <!-- <div class="swiper-slide">
                        <img src="./images/banner1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/banner1.jpg" alt="">
                    </div> -->

                </div>
                <div class="swiper-pagination"></div>

            </div>
            <!--推荐  -->
            <p class="rgf-tuijian">推荐商家</p>
            <nav class="rgf-con-nav">
                <ul>
                    <li>
                        综合排序
                        <span class="iconfont">&#xe61a;</span>
                    </li>
                    <li>
                        综合排序
                        <span class="iconfont">&#xe61a;</span>
                    </li>
                    <li>
                        综合排序
                        <span class="iconfont">&#xe61a;</span>
                    </li>
                    <li>
                        综合排序
                        <span class="iconfont">&#xe61a;</span>
                    </li>
                </ul>
            </nav>
            <div class="rgf-list">
                <ul>
                    <!-- <li>
                        <img src="./images/content.jpg" alt="">
                        <div>
                            <p>影茶</p>
                            <p>
                                <img src="./images/素材_03.jpg" alt="">
                                月售2557
                            </p>
                            <div>
                                <p>起送￥15 配送￥1</p>
                                <p>35分钟 700m</p>
                            </div>
                            <p>
                                <span>20减3</span>
                                <span>20减3</span>
                                <i>支持自取</i>
                                <i>支持自取</i>
                            </p>
                        </div>
                    </li> -->
                </ul>
            </div>


        </div>
    </main>
    <!-- footer -->
    <footer>
        <ul>
            <li class="rgf-footer-active">
                <span class="iconfont">&#xe688;</span>
                <p>首页</p>
            </li>
            <li>
                <span class="iconfont">&#xe688;</span>
                <p>首页</p>
            </li>
            <li>
                <span class="iconfont">&#xe688;</span>
                <p>首页</p>
            </li>
            <li>
                <span class="iconfont">&#xe688;</span>
                <p>首页</p>
            </li>
            <li>
                <span class="iconfont">&#xe688;</span>
                <p>首页</p>
            </li>

        </ul>
    </footer>
    <div class="rgf-zhezhao">
        <div>
            <img src="./images/hongbao.jpg" alt="">
            <a href="#">
                ×
            </a>
        </div>
    </div>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/rem.js"></script>
<script src="./js/swiper-3.4.2.min.js"></script>
<script src="./js/iscroll-probe.js"></script>
<script src="./js/index.js"></script>
<script>
    document.addEventListener("touchmove", function (ev) {
        ev.preventDefault();
    }, { passive: false });
    var mainscroll = new IScroll('#main', {
        probeType: 2
    })
    // new IScroll('.header-nav', {scrollX:true,scrollY:false})
    //底部点击
    $('footer li').click(function(){
        $(this).addClass('rgf-footer-active').siblings().removeClass('rgf-footer-active')
    })
    //关闭遮罩
    $('a').click(function(){
        $('.rgf-zhezhao').fadeOut();
    })
    //下拉刷新 上拉加载
    var rgf_flag = true;
    var rgf_timer;
    var rgf_num = 0;
    mainscroll.on('scroll', function () {
        if (this.y >= $('.rgf-xiala').height() && rgf_flag) {
            $('.rgf-xiala').html('松手加载').addClass('a');
            this.minScrollY = $('.rgf-xiala').height();
            rgf_flag = false;
        }
        if (this.y <= this.maxScrollY - $('.rgf-xiala').height() && rgf_flag && $('.rgf-list li').length < rgf_num) {
            $('.rgf-shangla').html('松手加载').addClass('a');
            var rgf_h = this.wrapperHeight - this.scrollerHeight;
            this.maxScrollY = rgf_h - $('.rgf-xiala').height();
            rgf_flag = false;
        }
    })
    mainscroll.on('scrollEnd', function () {
        if ($('.rgf-xiala').hasClass('a')) {
            $('.rgf-xiala').html('正在刷新');
            clearTimeout(rgf_timer);
            rgf_timer = setTimeout(function () {
                $('.rgf-xiala').html('下拉刷新').removeClass('a');
                rgf_flag = true;
                mainscroll.refresh()
            }, 1000)
        }
        if ($('.rgf-shangla').hasClass('a')) {
            $('.rgf-shangla').html('正在加载')
            $.ajax({
                url: './json/data.json',
                success: function (res) {
                    var rgf_list = res.list[$('.rgf-list li').length];



                    var rgf_liststr = `
                <li>
                        <img src="${rgf_list.src}" alt="">
                        <div>
                            <p>${rgf_list.pinpai}</p>
                            <p>
                                <img src="${rgf_list.src1}" alt="">
                                月售${rgf_list.xianshi}
                            </p>
                            <div>
                                <p>起送￥${rgf_list.huangou} 配送￥${rgf_list.xinren}</p>
                                <p>${rgf_list.oldjiage}分钟 ${rgf_list.mi}m</p>
                            </div>
                            <p>
                                <span>${rgf_list.quan1}</span>
                                <span>${rgf_list.quan2}</span>
                                <i>${rgf_list.ziqu}</i>
                                <i>${rgf_list.ziqu}</i>
                            </p>
                        </div>
                    </li>
                `

                    $('.rgf-list ul').append(rgf_liststr);
                    if ($('.rgf-list li').length == rgf_num) {
                        $('.rgf-shangla').html('到底了').removeClass('a')
                    } else {
                        $('.rgf-shangla').html('上拉加载').removeClass('a')

                    }
                    rgf_flag = true;
                    mainscroll.refresh()

                }
            })
        }

    })
    //数据渲染
    $.ajax({
        url: './json/data.json',
        success: function (res) {
            //轮播图渲染
            var rgf_banner = res.banner;
            var rgf_bannerstr = ''
            rgf_banner.forEach(element => {
                rgf_bannerstr += `
                <div class="swiper-slide">
                        <img src="${element.src}" alt="">
                    </div>
                `
            });
            $('.rgf-banner .swiper-wrapper').html(rgf_bannerstr);
            mainscroll.refresh()

            // //轮播图
            var mySwiper = new Swiper('.rgf-banner', {
                // autoplay: 1000,
                loop: true,
                pagination: '.swiper-pagination',
                autoplayDisableOnInteraction: false,//循环轮播
            })
            //列表页渲染
            var rgf_list = res.list;
            rgf_num = rgf_list.length;
            var rgf_liststr = ''
            rgf_list.forEach((element, i) => {
                if (i > 1) {
                    return
                }
                rgf_liststr += `
                <li>
                        <img src="${element.src}" alt="">
                        <div>
                            <p>${element.pinpai}</p>
                            <p>
                                <img src="${element.src1}" alt="">
                                月售${element.xianshi}
                            </p>
                            <div>
                                <p>起送￥${element.huangou} 配送￥${element.xinren}</p>
                                <p>${element.oldjiage}分钟 ${element.mi}m</p>
                            </div>
                            <p>
                                <span>${element.quan1}</span>
                                <span>${element.quan2}</span>
                                <i>${element.ziqu}</i>
                                <i>${element.ziqu}</i>
                            </p>
                        </div>
                    </li>
                `
            });
            $('.rgf-list ul').html(rgf_liststr);
            mainscroll.refresh()

        }

    })


</script>

</html>